@primary-color: #fff;
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    user-select: none;
}

.MainContent {

    height: 90vh;
    width: 90vw;
    border-radius: 6px;
    margin: 0 auto;
    .LeftSideCon {
        background-color: rgb(255, 255, 255);
        width: 19vw;
        height: 65vh;
        float: left;
        border-radius: 6px;
        font-size: 2vh;
        .group {

            width: 19vw;
            height: 17vh;
            background-color: #222;
            padding: 10px 5px;
            span {
                cursor: pointer;
                margin-top: 1vh;
                padding-left: 1vw;
                color: #d6d6d6;
                font-size: 2.8vh;
            }
        }

        .GroupList {
            margin-top: 1vh;
            padding-top: 1.5vh;
            padding-bottom: 1.5vh;
            li {
                height: 7vh;
                padding-left: 1.5vw;
                padding-top: 1.5vh;
                margin-bottom: 0.5vh;
                font-size: 20px;
                background-color: #fff;
            }
        }

    }

    .RightSideCon {
        background-color: rgb(255, 255, 255);
        width: 69vw;
        height: 82vh;
        float: right;

        .RightHead {

            width: 69vw;
            height: 7vh;
            line-height: 7vh;
            background-color: #f0f0f0;

            .ModBut {
                border-radius: 16px;
                float: right;
                margin-right: 2vw;

            }

            .RightWords {
                float: left;
                margin-left: 1.5vw;
                font-size: 2vh;
                color: #000;
            }
        }

        .RightMainCon {
            height: 75vh;
            width: 69vw;
            border-radius: 6px;

            ul {
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                padding: 3vw;

                li {

                    margin: 0 1.5vw 2vh 0;
                    cursor: pointer;
                    width: 14vw;
                    height: 16vh;
                    color: rgb(0, 0, 0);
                    background-color: lighten(spin(@primary-color, 5%), 49%);
                    text-align: center;
                    min-width: 150px;
                    line-height: 10vh;
                    font-size: 3vh;
                    border-radius: 6px;
                    transition: all .3s;
                    border:2px solid @primary-color;

                    div {
                        line-height: 5vh;
                        font-size: 1vh;
                    }

                    &:hover {
                        transform: translateY(-5%);
                        background-color: @primary-color;
                        color: #fff;
                        border: @primary-color;
                        box-shadow: 0 2px 5px 0px @primary-color;                   }
                }

                .plus {
                    line-height: 15vh;
                }
            }
        }
    }
}